<template>
  <div class="Xhome">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in lunbolistto" :key="item.id">
        <img :src="item.src" />
      </van-swipe-item>
    </van-swipe>
    <!-- 文字区域 -->
    <div class="box">
      <div class="txt1">
        <span class="span1">{{ ShangpinX.name }}</span>
      </div>
      <div class="txt2">
        <span class="span2">{{ ShangpinX.info }} </span>
      </div>
      <div class="txt3">
        <span class="span3">￥{{ ShangpinX.price }} </span>
      </div>
    </div>
    <!-- 加入购物车区域 -->
    <div class="cartbox">
      <div class="product pro1" @click="show = !show">
        <span class="info">已选</span>
        <div class="edition product-list">
          {{ ShangpinX.name }} {{ selected.edition }} x 1
        </div>
      </div>
      <div class="product pro2">
        <span class="info">送至</span>
        <div class="address product-list">北京</div>
      </div>
    </div>
    <!-- 图片区域 -->
    <div class="mtop">
      <div class="divimg" v-for="item in Shangpingimg" :key="item.id">
        <img :src="item.imgs" alt="" />
      </div>
    </div>
    <!-- 返回按键 -->
    <div class="fh" @click="fh">
      <van-icon name="arrow-left" />
    </div>
    <!-- 加入购物车 -->
    <van-sku v-model="show" :sku="sku" :goods="goods">
      <template #sku-header-price>
        <div class="price">
          <span class="">￥{{ selected.price || ShangpinX.price }}</span>
        </div>
      </template>
      <template #sku-header-extra></template>
      <template #sku-group>
        <div class="group">版本</div>
        <div class="group-item1">
          <div
            :class="['selectedi', { active: index === active1 }]"
            v-for="(edi2, index) in editions"
            :key="edi2.id"
            @click="change1(index)"
          >
            <span>{{ edi2.Memory }}</span>
            <span>￥{{ edi2.edition_price }}元</span>
          </div>
        </div>
        <div class="group">颜色</div>
        <div class="group-item2">
          <div class="selectbox">
            <div
              :class="['colorbox', { active: index2 === active2 }]"
              v-for="(col, index2) in colors"
              :key="col.id"
              @click="change2(index2)"
            >
              {{ col.color }}
            </div>
          </div>
        </div>
      </template>
    </van-sku>
  </div>
</template>

<script>
import { shangpinList2, shangpingimg, shangpinList } from '../../../api/home'
import { geteditions, getcolors } from '../../../api/goods'
export default {
  props: ['id'],
  data: () => ({
    lunbolistto: [], //  商品轮播图
    Shangpingimg: [], // 商品评论区图片
    ShangpinX: {},
    Geteditions: [],
    show: false,
    sku: {
      // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
      // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
      tree: [
        {
          k: '颜色', // skuKeyName：规格类目名称
          k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          v: [
            {
              id: '1', // skuValueId：规格值 id
              name: '红色', // skuValueName：规格值名称
              imgUrl: '', // 规格类目图片，只有第一个规格类目可以定义图片
              previewImgUrl: '' // 用于预览显示的规格类目图片
            },
            {
              id: '1',
              name: '蓝色',
              imgUrl: '',
              previewImgUrl: ''
            }
          ],
          largeImageMode: true //  是否展示大图模式
        }
      ],
      collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
      none_sku: false // 是否无规格商品
    },
    goods: {
      // 默认商品 sku 缩略图
      picture: ''
    },
    editions: [],
    colors: [],
    selected: [],
    active1: 0,
    active2: 0
  }),
  created() {
    this.shangpinList2()
    this.shangpingimg()
    this.shangpinList()
    this.getEditions()
    this.getColors()
  },
  methods: {
    fh() {
      this.$router.go(-1)
    },
    async shangpinList2() {
      const res = await shangpinList2(this.id)
      this.lunbolistto = res.data.message
    },
    async shangpingimg() {
      const res = await shangpingimg(this.id)
      this.Shangpingimg = res.data.message
    },
    async shangpinList() {
      const res = await shangpinList()
      this.ShangpinX = res.data.message[(this.id) - 1]
    },
    async getEditions() {
      const res = await geteditions(this.id)
      this.editions = res.data.message
      this.editions.forEach(el => {
        el.isselect = false
      })
      this.editions[0].isselect = true
    },
    async getColors(index) {
      const res = await getcolors(index)
      this.colors = res.data.message
      this.goods.picture = res.data.message[0].img
    },
    change1(index) {
      console.log(this.editions)
      this.selected.edition = this.editions[index].Memory
      this.selected.price = this.editions[index].edition_price
      this.selected.id = this.editions[index].id
      this.getColors(this.selected.id)
      this.active1 = index
      console.log(this.selected)
    },
    change2(index) {
      this.goods.picture = this.colors[index].img
      this.active2 = index
    }
  }
}
</script>

<style  lang="less" scoped>
.Xhome {
  .my-swipe .van-swipe-item {
    line-height: 150px;
    height: 400px;
    img {
      width: 100%;
    }
  }
  .box {
    width: 100%;
    height: 140px;
    padding-left: 16px;
    box-sizing: border-box;
    .txt2 {
      .span2 {
        font-size: 14px;
        padding: 20px 0;
        color: rgba(0, 0, 0, 0.54);
        word-break: break-all;
      }
    }
    .txt1 {
      margin-top: 16px;
      .span1 {
        font-size: 24px;
        background: #fff;
        text-align: left;
      }
    }
    .txt3 {
      margin-top: 10px;
      .span3 {
        padding: 20px 0;
        color: #ff6700;
        font-size: 24px;
      }
    }
    // background-color: rgb(53, 53, 63);
  }
  .cartbox {
    padding: 12px 16px;
    background-color: #fafafa;
    border-radius: 8px;
    overflow: hidden;
    margin: 8px 16px 0;
    font-size: 14px;
    .pro1 {
      padding-bottom: 12px;
    }
    .pro2 {
      padding-top: 12px;
    }
    .product {
      display: flex;
      align-items: center;
      position: relative;
      .info {
        color: rgba(0, 0, 0, 0.54);
        margin-right: 18px;
        min-width: 25px;
      }
      .edition::before {
        height: 1px;
        content: "";
        width: 100%;
        border-top: 1px solid #ccc;
        position: absolute;
        top: 100%;
        right: 0;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
      }
      .product-list::after {
        content: "";
        position: absolute;
        right: 16px;
        top: 50%;
        width: 10px;
        height: 10px;
        border-left: 1px solid currentColor;
        border-top: 1px solid currentColor;
        transform: translate3d(0, -50%, 0) rotate(135deg);
        -webkit-transform: translate3d(0, -50%, 0) rotate(135deg);
      }
    }
  }
  .van-image::before {
    content: "";
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 0;
    border: 1px solid #ccc;
    -webkit-transform: scale(1);
    -webkit-transform-origin: 0 0;
    transform: scale(1);
    transform-origin: 0 0;
  }
  .group {
    padding: 0 16px;
    margin: 16px 0 8px;
  }
  .price {
    font-size: 24px;
  }
  .group-item1 {
    padding: 0 16px;
    div.active {
      color: #f56600;
      border: 1px solid #f56600 !important;
    }
    .selectedi {
      position: relative;
      padding: 0 16px !important;
      height: 36px;
      min-width: 72.5px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0 4px;
      text-align: center;
      margin: 8px 0 0 0;
      overflow: visible;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      border: 1px solid #ccc;
      box-sizing: border-box;
      font-size: 16px;
      color: #8f8f94;
    }
  }
  .group-item2 {
    .selectbox {
      position: relative;
      padding: 12px 16px !important;
      min-width: 72.5px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0 4px;
      overflow: visible;
      border: 1px solid transparent;
      .colorbox {
        position: relative;
        display: inline-block;
        height: 36px;
        line-height: 36px;
        text-align: center;
        padding: 0 15px;
        margin-right: 8px;
        border: 1px solid #ccc;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #8f8f94;
      }
      div.active {
        color: #f56600;
        border: 1px solid #f56600 !important;
      }
    }
  }
  .mtop {
    margin-top: 50px;
  }
  .divimg {
    img {
      width: 100%;
      height: 100%;
    }
  }
  .fh {
    position: fixed;
    top: 20px;
    left: 12px;
    display: block;
    width: 30px;
    height: 30px;
    margin: 2px;
    color: #ddd;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    z-index: 999;
    text-align: center;
    line-height: 36px;
  }
}
</style>
